<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
		<title>数同</title>
		<script src="../common.js"></script>
		<script src="game.js"></script>
		<style type="text/css">
			table {
				border-spacing: 0;
				border-collapse: 0;
				text-align: center;
				border: 1px solid #000;
				margin: 10px;
			}

			td {
				border: 1px solid #000;
				width: 20px;
				height: 20px;
				cursor: pointer;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<button id="reset">重置</button>
		<button id="print">打印</button>
		<table id="area"> </table>
	</body>

	<script type="text/javascript">
		const g = new Game()

		$("reset").onclick = function(e) {
			init()
		}
		$("print").onclick = function(e) {
			g.test()
		}

		function paint() {
			let html = ""
			for (var h = 0; h < g.height; h++) {
				html += "<tr>"
				for (var w = 0; w < g.width; w++) {
					let id = h * g.width + w
					let val = g.status[id]
					html += `<td id='${id}' onclick='clickcell(${id})'>${val}</td>`
				}
				html += "</tr>"
			}
			$("area").innerHTML = html
		}

		function clickcell(id) {
			// if (g.isFinished) {
			// 	return
			// }
			g.click(id)
			change(id)
			change(id + 1)
			change(id - 1)
			change(id + g.width)
			change(id - g.width)
		}

		function change(id) {
			if (id < 0 || id >= g.size) {
				return
			}
			$(id).innerHTML = g.status[id]
		}

		function init() {
			g.init(3,4,9)
			paint()
		}

		init()
	</script>
</html>